<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>站点详情 - 风速监测系统</title>
    <!-- Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <!-- Particles.js -->
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <style>
        :root {
            --blue: #3B82F6;
            --green: #10B981;
            --red: #EF4444;
            --yellow: #F59E0B;
            --purple: #8B5CF6;
            --gray: #6B7280;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #111827;
            color: #F9FAFB;
        }
        
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
        }
        
        .station-card {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .station-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
        }
        
        .alert-pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
            }
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #1F2937;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #4B5563;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #6B7280;
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 粒子背景 -->
    <div id="particles-js"></div>
    
    <!-- 主容器 -->
    <div class="container mx-auto px-4 py-8">
        <!-- 头部 -->
        <header class="mb-6 flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-white flex items-center">
                    <i class="fas fa-wind mr-3 text-blue-500"></i>
                    <span id="station-name">站点详情</span>
                </h1>
                <p class="text-gray-400 mt-1" id="current-time">更新时间: 加载中...</p>
            </div>
            <div class="flex space-x-2">
                <button onclick="window.location.href='index.html'" class="px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-md flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i>返回
                </button>
                <button id="refresh-btn" class="px-3 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-md flex items-center">
                    <i class="fas fa-sync-alt mr-2"></i>刷新
                </button>
                <button id="open-compare" class="px-3 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded-md flex items-center">
                    <i class="fas fa-chart-bar mr-2"></i>站点对比
                </button>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            <!-- 风速和状态卡片 -->
            <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
                <div class="flex justify-between items-start mb-4">
                    <h2 class="text-xl font-bold">当前风速</h2>
                    <div class="flex items-center px-2 py-1 rounded-full bg-gray-700 text-xs">
                        <div id="status-indicator" class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                        <span id="status-text" class="text-green-400">正常</span>
                    </div>
                </div>
                
                <!-- 风速仪表盘 -->
                <div id="speed-gauge" class="h-52 -mt-4 -mb-2"></div>
                
                <div class="flex justify-between items-end">
                    <div>
                        <div class="text-sm text-gray-400">当前风速</div>
                        <div class="text-3xl font-bold mt-1">
                            <span id="current-speed-value">0.0</span>
                            <span class="text-lg font-normal text-gray-400">m/s</span>
                        </div>
                    </div>
                    <div>
                        <div class="text-sm text-gray-400">位置</div>
                        <div class="text-lg mt-1" id="station-location">北部山区</div>
                    </div>
                </div>
            </div>

            <!-- 当前数据卡片 -->
            <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
                <h2 class="text-xl font-bold mb-4">当前数据</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-gray-700/60 p-4 rounded-lg">
                        <p class="text-sm text-blue-300">风速</p>
                        <div class="flex items-end">
                            <p class="text-2xl font-bold" id="current-wind">0.0</p>
                            <span class="text-base text-blue-400 ml-1">m/s</span>
                        </div>
                    </div>
                    <div class="bg-gray-700/60 p-4 rounded-lg">
                        <p class="text-sm text-red-300">温度</p>
                        <div class="flex items-end">
                            <p class="text-2xl font-bold" id="current-temp">24.5</p>
                            <span class="text-base text-red-400 ml-1">°C</span>
                        </div>
                    </div>
                    <div class="bg-gray-700/60 p-4 rounded-lg">
                        <p class="text-sm text-green-300">湿度</p>
                        <div class="flex items-end">
                            <p class="text-2xl font-bold" id="current-humidity">68</p>
                            <span class="text-base text-green-400 ml-1">%</span>
                        </div>
                    </div>
                    <div class="bg-gray-700/60 p-4 rounded-lg">
                        <p class="text-sm text-yellow-300">状态</p>
                        <p class="text-2xl font-bold" id="station-status">正常</p>
                    </div>
                </div>
            </div>
            
            <!-- 历史趋势图 -->
            <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
                <div class="flex justify-between items-start mb-4">
                    <h2 class="text-xl font-bold">风速趋势</h2>
                    <select id="time-range" class="bg-gray-700 text-white px-3 py-1 rounded-lg text-sm">
                        <option value="1h">最近1小时</option>
                        <option value="24h" selected>最近24小时</option>
                        <option value="7d">最近7天</option>
                    </select>
                </div>
                <div class="h-64" id="history-chart"></div>
            </div>
        </div>

        <!-- 风速预测与预警信息 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            <!-- 风速预测 -->
            <div class="bg-gray-800 rounded-lg p-6 shadow-lg lg:col-span-2">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold">风速预测</h2>
                </div>
                <div class="h-64 w-full" id="forecast-chart"></div>
                <div class="grid grid-cols-3 gap-4 mt-6">
                    <div class="bg-gray-700/60 p-3 rounded-lg">
                        <div class="flex items-center mb-1">
                            <i class="fas fa-clock text-blue-400 mr-2"></i>
                            <p class="text-sm text-blue-300">3小时后</p>
                        </div>
                        <p class="font-bold text-lg" id="forecast-3h">4.2 m/s</p>
                    </div>
                    <div class="bg-gray-700/60 p-3 rounded-lg">
                        <div class="flex items-center mb-1">
                            <i class="fas fa-clock text-blue-500 mr-2"></i>
                            <p class="text-sm text-blue-300">6小时后</p>
                        </div>
                        <p class="font-bold text-lg" id="forecast-6h">5.8 m/s</p>
                    </div>
                    <div class="bg-gray-700/60 p-3 rounded-lg">
                        <div class="flex items-center mb-1">
                            <i class="fas fa-clock text-indigo-400 mr-2"></i>
                            <p class="text-sm text-blue-300">12小时后</p>
                        </div>
                        <p class="font-bold text-lg" id="forecast-12h">8.3 m/s</p>
                    </div>
                </div>
            </div>

            <!-- 预警信息 -->
            <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold">预警信息</h2>
                </div>
                <div id="alerts" class="space-y-3 max-h-[250px] overflow-y-auto pr-1">
                    <!-- 警报将通过JavaScript动态插入 -->
                </div>

                <div class="mt-6 pt-4 border-t border-white/10">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm">风速阈值警报</span>
                        <span class="text-sm font-medium px-2 py-1 rounded-full bg-red-500/20 text-red-300" id="threshold-value">12.0 m/s</span>
                    </div>
                    <div class="relative">
                        <div class="absolute -top-3 left-0 right-0 flex justify-between text-xs text-gray-400 px-1">
                            <span>5</span>
                            <span>10</span>
                            <span>15</span>
                            <span>20</span>
                        </div>
                        <input type="range" min="5" max="20" value="12" step="0.5" class="w-full h-2 bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 rounded-lg appearance-none cursor-pointer" id="threshold-slider">
                    </div>
                    <div class="flex justify-between text-xs mt-1 text-gray-400">
                        <span>安全</span>
                        <span>警告</span>
                        <span>危险</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据导出卡片 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg mb-6">
            <div class="flex flex-wrap justify-between items-center mb-4">
                <h2 class="text-xl font-bold flex items-center">
                    <i class="fas fa-database text-purple-400 mr-2"></i>
                    数据导出
                </h2>
                <div class="flex flex-wrap space-x-2 mt-2 sm:mt-0">
                    <select class="bg-gray-700 text-white px-3 py-2 rounded-lg" id="export-range">
                        <option>当前视图数据</option>
                        <option>最近24小时</option>
                        <option>最近7天</option>
                        <option>自定义范围</option>
                    </select>
                    <select class="bg-gray-700 text-white px-3 py-2 rounded-lg" id="export-format">
                        <option>CSV</option>
                        <option>JSON</option>
                        <option>Excel</option>
                    </select>
                    <button id="export-btn" class="bg-purple-600 hover:bg-purple-500 text-white px-4 py-2 rounded-lg flex items-center">
                        <i class="fas fa-download mr-2"></i>导出
                    </button>
                </div>
            </div>
            
            <div class="text-sm text-gray-400 mb-4">
                导出数据包括：风速、温度、湿度、气压及风向等参数，时间范围可自定义选择。
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                <!-- CSV格式卡片 -->
                <div class="bg-gray-700/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex justify-between items-start">
                        <div class="flex items-center">
                            <i class="fas fa-file-csv text-2xl text-green-500 mr-3"></i>
                            <div>
                                <h3 class="font-medium">CSV格式</h3>
                                <p class="text-xs text-gray-400">通用数据格式，易于导入Excel</p>
                            </div>
                        </div>
                        <button class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-600 hover:bg-green-600">
                            <i class="fas fa-download text-sm"></i>
                        </button>
                    </div>
                </div>

                <!-- JSON格式卡片 -->
                <div class="bg-gray-700/50 rounded-lg p-4 border border-gray-700">
                    <div class="flex justify-between items-start">
                        <div class="flex items-center">
                            <i class="fas fa-file-code text-2xl text-blue-500 mr-3"></i>
                            <div>
                                <h3 class="font-medium">JSON格式</h3>
                                <p class="text-xs text-gray-400">适合程序处理，完整数据结构</p>
                            </div>
                        </div>
                        <button class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-600 hover:bg-blue-600">
                            <i class="fas fa-download text-sm"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 导出历史 -->
                <div class="bg-gray-700/50 rounded-lg p-4 border border-gray-700">
                    <h3 class="font-medium mb-2 flex items-center">
                        <i class="fas fa-history text-gray-400 mr-2"></i>
                        导出历史
                    </h3>
                    <div class="text-xs text-gray-400">
                        <div class="flex justify-between items-center mb-2 pb-2 border-b border-gray-600">
                            <span>24小时数据.csv</span>
                            <span>今天 10:25</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span>7天数据.json</span>
                            <span>昨天 16:40</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <footer class="mt-8 text-center text-gray-500 text-sm">
            <p>© 2023 风速监测系统 | 版本 1.0.0</p>
            <p class="mt-1">
                <span id="connection-status" class="inline-flex items-center">
                    <i class="fas fa-circle text-yellow-500 mr-1 text-xs"></i>
                    正在连接...
                </span>
            </p>
        </footer>

        <!-- 对比模态框 -->
        <div id="compare-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
            <div class="absolute inset-0 bg-black bg-opacity-80 backdrop-blur-sm"></div>
            <div class="relative bg-gray-800/99 w-11/12 max-w-7xl rounded-lg overflow-hidden border border-gray-700 shadow-xl" style="max-height: 95vh;">
                
                <div class="flex items-center justify-between p-3 border-b border-gray-700">
                    <h2 class="text-xl font-bold flex items-center">
                        <i class="fas fa-chart-line text-blue-400 mr-2"></i>
                        站点数据对比
                    </h2>
                    <button id="close-compare-modal" class="text-gray-400 hover:text-white">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="flex flex-col md:flex-row">
                    <!-- 左侧控制面板 -->
                    <div class="p-3 border-r border-gray-700 bg-gray-900/95 md:w-64">
                        <!-- 站点选择 -->
                        <div class="mb-4">
                            <h3 class="text-sm font-bold mb-2 text-gray-300 flex items-center">
                                <i class="fas fa-map-marker-alt text-blue-400 mr-2"></i>
                                选择站点
                            </h3>
                            <div class="space-y-2 bg-gray-800/80 p-2 rounded border border-gray-700">
                                <div class="flex items-center rounded p-1.5 hover:bg-gray-700/50">
                                    <input type="checkbox" id="compare-A" value="A" class="w-4 h-4 mr-2">
                                    <div class="flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-blue-500 mr-2"></span>
                                        <span class="text-sm">站点A</span>
                                    </div>
                                    <span class="text-xs px-1.5 py-0.5 bg-blue-500 rounded-full ml-auto">在线</span>
                                </div>
                                <div class="flex items-center rounded p-1.5 hover:bg-gray-700/50">
                                    <input type="checkbox" id="compare-B" value="B" class="w-4 h-4 mr-2">
                                    <div class="flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span>
                                        <span class="text-sm">站点B</span>
                                    </div>
                                    <span class="text-xs px-1.5 py-0.5 bg-blue-500 rounded-full ml-auto">在线</span>
                                </div>
                                <div class="flex items-center rounded p-1.5 hover:bg-gray-700/50">
                                    <input type="checkbox" id="compare-C" value="C" class="w-4 h-4 mr-2">
                                    <div class="flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></span>
                                        <span class="text-sm">站点C</span>
                                    </div>
                                    <span class="text-xs px-1.5 py-0.5 bg-yellow-500 rounded-full ml-auto">警告</span>
                                </div>
                                <div class="flex items-center rounded p-1.5 hover:bg-gray-700/50">
                                    <input type="checkbox" id="compare-D" value="D" class="w-4 h-4 mr-2">
                                    <div class="flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-purple-500 mr-2"></span>
                                        <span class="text-sm">站点D</span>
                                    </div>
                                    <span class="text-xs px-1.5 py-0.5 bg-red-500 rounded-full ml-auto">离线</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据类型 -->
                        <div class="mb-4">
                            <h3 class="text-sm font-bold mb-2 text-gray-300 flex items-center">
                                <i class="fas fa-chart-bar text-blue-400 mr-2"></i>
                                数据类型
                            </h3>
                            <div class="flex flex-col space-y-2">
                                <button class="compare-type-btn active bg-blue-500 text-white px-3 py-1.5 rounded text-sm flex items-center" data-type="wind">
                                    <i class="fas fa-wind mr-2"></i>风速
                                </button>
                                <button class="compare-type-btn bg-gray-700 text-white px-3 py-1.5 rounded text-sm flex items-center" data-type="temp">
                                    <i class="fas fa-temperature-high mr-2"></i>温度
                                </button>
                                <button class="compare-type-btn bg-gray-700 text-white px-3 py-1.5 rounded text-sm flex items-center" data-type="humidity">
                                    <i class="fas fa-tint mr-2"></i>湿度
                                </button>
                            </div>
                        </div>
                        
                        <!-- 时间范围 -->
                        <div class="mb-4">
                            <h3 class="text-sm font-bold mb-2 text-gray-300 flex items-center">
                                <i class="fas fa-clock text-blue-400 mr-2"></i>
                                时间范围
                            </h3>
                            <select id="compare-time-range" class="w-full bg-gray-700 text-white rounded px-3 py-1.5 text-sm border border-gray-600">
                                <option value="1h">最近1小时</option>
                                <option value="24h" selected>最近24小时</option>
                                <option value="7d">最近7天</option>
                            </select>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="flex flex-col space-y-2">
                            <button id="update-compare" class="w-full px-3 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded flex items-center justify-center">
                                <i class="fas fa-sync-alt mr-2"></i>更新对比
                            </button>
                            <button class="w-full px-3 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded flex items-center justify-center">
                                <i class="fas fa-file-export mr-2"></i>导出数据
                            </button>
                        </div>
                    </div>
                    
                    <!-- 右侧图表区域 -->
                    <div class="flex-grow p-3 overflow-hidden">
                        <div class="flex items-center justify-between mb-3">
                            <h3 id="compare-chart-title" class="text-lg font-bold text-white">风速对比图</h3>
                            <div class="flex items-center space-x-4">
                                <div id="legend-container" class="flex items-center space-x-3"></div>
                            </div>
                        </div>
                        <div id="compare-chart-container" class="w-full bg-gray-900/95 rounded-lg border border-gray-700" style="height: calc(90vh - 150px);"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本部分 -->
    <script>
        // 全局数据对象
        const stationData = {
            currentStationId: null,
            historical: {},
            realtime: null,
            charts: {},
            alertThreshold: 12.0
        };

        // 从URL获取站点ID
        const urlParams = new URLSearchParams(window.location.search);
        const stationId = urlParams.get('id') || 'A';
        
        // 全局图表变量
        let historyChart = null;
        let forecastChart = null;
        let compareChart = null;
        let speedGauge = null;
        
        // 站点信息配置
        const stationConfig = {
            'A': { id: 'A', name: '站点A', location: '北部山区', color: '#3B82F6', baseWind: 8.0, baseTemp: 12.0, baseHumidity: 50 },
            'B': { id: 'B', name: '站点B', location: '南部平原', color: '#10B981', baseWind: 4.0, baseTemp: 18.0, baseHumidity: 65 },
            'C': { id: 'C', name: '站点C', location: '东部海岸', color: '#F59E0B', baseWind: 10.0, baseTemp: 16.0, baseHumidity: 75 },
            'D': { id: 'D', name: '站点D', location: '西部沙漠', color: '#8B5CF6', baseWind: 2.0, baseTemp: 22.0, baseHumidity: 30 }
        };
        
        // 格式化时间
        function formatTime(dateStr) {
            const date = new Date(dateStr);
            return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
        }
        
        // 格式化日期
        function formatDate(dateStr) {
            const date = new Date(dateStr);
            return `${date.getMonth()+1}/${date.getDate()} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
        }
        
        // 更新时间显示
        function updateTime() {
            const now = new Date();
            document.getElementById('current-time').textContent = 
                `更新时间: ${now.getFullYear()}-${String(now.getMonth()+1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
        }
        
        // 初始化仪表盘和图表
        function initCharts() {
            // 获取风速仪表盘容器
            const gaugeContainer = document.getElementById('speed-gauge');
            if (!gaugeContainer) return;
            
            // 创建风速仪表盘
            speedGauge = echarts.init(gaugeContainer);
            const gaugeOption = {
                backgroundColor: 'transparent',
                series: [
                    {
                        type: 'gauge',
                        radius: '100%',
                        center: ['50%', '60%'],
                        startAngle: 210,
                        endAngle: -30,
                        min: 0,
                        max: 20,
                        splitNumber: 10,
                        axisLine: {
                            lineStyle: {
                                width: 14,
                                color: [
                                    [0.3, '#10B981'],
                                    [0.7, '#F59E0B'],
                                    [1, '#EF4444']
                                ]
                            }
                        },
                        pointer: {
                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                            itemStyle: {
                                color: 'auto'
                            },
                            length: '12%',
                            width: 8,
                            offsetCenter: [0, '-60%']
                        },
                        axisTick: {
                            length: 12,
                            lineStyle: {
                                color: 'auto',
                                width: 1
                            }
                        },
                        splitLine: {
                            length: 20,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            }
                        },
                        axisLabel: {
                            color: '#D1D5DB',
                            fontSize: 12,
                            distance: -60
                        },
                        title: {
                            offsetCenter: [0, '20%'],
                            fontSize: 14,
                            color: '#D1D5DB'
                        },
                        detail: {
                            fontSize: 32,
                            offsetCenter: [0, '60%'],
                            valueAnimation: true,
                            formatter: function(value) {
                                return value.toFixed(1) + ' m/s';
                            },
                            color: '#ffffff'
                        },
                        data: [
                            {
                                value: 0,
                                name: '风速'
                            }
                        ]
                    }
                ]
            };
            
            speedGauge.setOption(gaugeOption);
            
            // 创建历史风速图表
            historyChart = echarts.init(document.getElementById('history-chart'));
            
            const historyOption = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        const date = new Date(params[0].value[0]);
                        const formattedTime = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
                        
                        return `<div style="font-weight:bold">${formattedTime}</div>
                               <div style="display:flex;align-items:center;margin-top:5px">
                                   <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#3B82F6;margin-right:5px"></span>
                                   <span>风速: ${params[0].value[1].toFixed(1)} m/s</span>
                               </div>`;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '10px',
                    containLabel: true
                },
                xAxis: {
                    type: 'time',
                    axisLine: {
                        lineStyle: {
                            color: '#6B7280'
                        }
                    },
                    axisLabel: {
                        color: '#D1D5DB'
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '风速 (m/s)',
                    nameTextStyle: {
                        color: '#D1D5DB'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#6B7280'
                        }
                    },
                    axisLabel: {
                        color: '#D1D5DB'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#374151'
                        }
                    }
                },
                series: [
                    {
                        name: '风速',
                        type: 'line',
                        smooth: true,
                        symbol: 'emptyCircle',
                        symbolSize: 8,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(59, 130, 246, 0.5)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(59, 130, 246, 0.0)'
                                }
                            ])
                        },
                        lineStyle: {
                            width: 4,
                            color: '#3B82F6'
                        },
                        itemStyle: {
                            color: '#3B82F6'
                        },
                        data: []
                    }
                ]
            };
            
            historyChart.setOption(historyOption);
            
            // 创建风速预测图表
            forecastChart = echarts.init(document.getElementById('forecast-chart'));
            
            // 生成模拟预测数据
            const forecastData = [];
            const now = new Date();
            const config = getStationConfig(stationId);
            const baseWindSpeed = config.baseWind || 5;
            
            // 生成未来12小时的预测
            for (let i = 0; i < 12; i++) {
                const forecastTime = new Date(now.getTime() + i * 60 * 60 * 1000);
                
                // 基于小时产生波动
                const hourVariation = Math.sin(forecastTime.getHours() / 24 * Math.PI * 2) * 1.5;
                
                // 添加随机波动
                const randomVariation = (Math.random() - 0.5) * 2;
                
                // 计算预测风速
                const forecastWindSpeed = Math.max(0.1, baseWindSpeed + hourVariation + randomVariation);
                
                forecastData.push([
                    forecastTime,
                    forecastWindSpeed
                ]);
            }
            
            const forecastOption = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        const date = new Date(params[0].value[0]);
                        const formattedTime = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
                        
                        let html = `<div style="font-weight:bold">${formattedTime}</div>`;
                        
                        params.forEach(param => {
                            if (param.seriesIndex === 0) {
                                html += `<div style="display:flex;align-items:center;margin-top:5px">
                                    <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#8B5CF6;margin-right:5px"></span>
                                    <span>预测风速: ${param.value[1].toFixed(1)} m/s</span>
                                </div>`;
                            }
                        });
                        
                        return html;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '10px',
                    containLabel: true
                },
                xAxis: {
                    type: 'time',
                    axisLine: {
                        lineStyle: {
                            color: '#6B7280'
                        }
                    },
                    axisLabel: {
                        color: '#D1D5DB',
                        formatter: function(value) {
                            const date = new Date(value);
                            return `${date.getHours().toString().padStart(2, '0')}:00`;
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    min: now.getTime(),
                    max: new Date(now.getTime() + 12 * 60 * 60 * 1000).getTime(),
                    minInterval: 3600 * 1000, // 1小时的间隔
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                const date = new Date(params.value);
                                return `${date.getMonth()+1}月${date.getDate()}日 ${date.getHours()}:00`;
                            }
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '风速 (m/s)',
                    nameTextStyle: {
                        color: '#D1D5DB'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#6B7280'
                        }
                    },
                    axisLabel: {
                        color: '#D1D5DB'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#374151'
                        }
                    }
                },
                series: [
                    {
                        name: '风速预测',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            width: 4,
                            color: '#8B5CF6',
                            type: 'dashed'
                        },
                        itemStyle: {
                            color: '#8B5CF6'
                        },
                        data: forecastData,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(139, 91, 246, 0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(139, 91, 246, 0.0)'
                                }
                            ])
                        }
                    },
                    {
                        name: '警戒线',
                        type: 'line',
                        symbol: 'none',
                        lineStyle: {
                            width: 2,
                            color: '#EF4444',
                            type: 'dashed'
                        },
                        data: Array(12).fill(parseFloat(document.getElementById('threshold-value').textContent) || 10)
                    }
                ]
            };
            
            forecastChart.setOption(forecastOption);
            
            // 更新预测信息卡片
            const updateForecastCards = () => {
                if (forecastData.length >= 3) {
                    document.getElementById('forecast-3h').textContent = forecastData[2][1].toFixed(1) + " m/s";
                    document.getElementById('forecast-6h').textContent = forecastData[5][1].toFixed(1) + " m/s";
                    document.getElementById('forecast-12h').textContent = forecastData[11][1].toFixed(1) + " m/s";
                }
            };
            
            updateForecastCards();
            
            // 添加窗口大小变化监听器
            window.addEventListener('resize', function() {
                speedGauge.resize();
                historyChart.resize();
                forecastChart.resize();
            });
        }
        
        // 获取站点配置
        function getStationConfig(stationId) {
            return stationConfig[stationId] || stationConfig['A'];
        }
        
        // 生成模拟数据
        function generateMockData(hours = 24) {
            // 获取站点配置
            const config = getStationConfig(stationId);
            const now = new Date();
            const data = [];
            
            // 生成历史数据
            for (let i = hours; i >= 0; i--) {
                const timestamp = new Date(now.getTime() - i * 60 * 60 * 1000);
                
                // 基础风速
                const baseWind = config.baseWind;
                
                // 添加时间变化 - 白天风速大，晚上风速小
                const hourFactor = Math.sin((timestamp.getHours() - 6) / 24 * Math.PI * 2) * 0.4 + 0.6;
                
                // 添加随机变化
                const randomWindVariation = (Math.random() - 0.5) * baseWind * 0.4;
                const randomTempVariation = (Math.random() - 0.5) * 2;
                const randomHumidityVariation = (Math.random() - 0.5) * 5;
                
                // 计算最终值
                const windSpeed = Math.max(0.1, baseWind * hourFactor + randomWindVariation);
                const temperature = config.baseTemp + randomTempVariation + (Math.sin((timestamp.getHours() - 4) / 24 * Math.PI * 2) * 3);
                const humidity = Math.min(100, Math.max(10, config.baseHumidity - (Math.sin((timestamp.getHours() - 4) / 24 * Math.PI * 2) * 10) + randomHumidityVariation));
                
                data.push({
                    timestamp: timestamp.toISOString(),
                    windSpeed: windSpeed,
                    temperature: temperature,
                    humidity: humidity
                });
            }
            
            return data;
        }
        
        // 更新数据显示
        function updateDataDisplay(data) {
            if (!data || data.length === 0) return;
            
            // 保存当前数据
            if (!stationData.historical[stationId]) {
                stationData.historical[stationId] = [];
            }
            
            // 如果传入的是单个数据点的数组，将其添加到历史数据中
            if (data.length === 1) {
                stationData.historical[stationId].push(data[0]);
                // 限制历史数据数量，保留最近的数据点
                if (stationData.historical[stationId].length > 200) {
                    stationData.historical[stationId].shift();
                }
                // 使用完整的历史数据进行显示更新
                data = stationData.historical[stationId];
            } else {
                // 如果传入的是完整历史数据，则直接替换
                stationData.historical[stationId] = data;
            }
            
            // 获取最新数据点
            const latestData = data[data.length - 1];
            
            // 更新仪表盘
            if (speedGauge) {
                speedGauge.setOption({
                    series: [
                        {
                            data: [
                                {
                                    value: latestData.windSpeed
                                }
                            ]
                        }
                    ]
                });
            }
            
            // 更新当前风速值
            document.getElementById('current-speed-value').textContent = latestData.windSpeed.toFixed(1);
            document.getElementById('current-wind').textContent = latestData.windSpeed.toFixed(1);
            document.getElementById('current-temp').textContent = latestData.temperature.toFixed(1);
            document.getElementById('current-humidity').textContent = Math.round(latestData.humidity);
            
            // 更新站点名称和位置
            const config = getStationConfig(stationId);
            document.getElementById('station-name').textContent = config.name;
            document.getElementById('station-location').textContent = config.location;
            
            // 更新历史图表 - 使用完整的历史数据
            if (historyChart) {
                // 确保使用完整的数据集而不是只有最新数据点
                const chartData = data.map(item => [
                    new Date(item.timestamp),
                    item.windSpeed
                ]);
                
                historyChart.setOption({
                    series: [
                        {
                            data: chartData
                        }
                    ]
                });
            }
            
            // 更新警报状态
            updateAlertStatus(latestData.windSpeed);
        }
        
        // 更新警报状态
        function updateAlertStatus(windSpeed) {
            const threshold = parseFloat(document.getElementById('threshold-value').textContent);
            const statusIndicator = document.getElementById('status-indicator');
            const statusText = document.getElementById('status-text');
            const stationStatus = document.getElementById('station-status');
            
            if (windSpeed >= threshold) {
                // 危险状态
                statusIndicator.className = 'w-3 h-3 rounded-full bg-red-500 mr-2';
                statusText.textContent = '警报';
                statusText.className = 'text-red-400';
                stationStatus.textContent = '警报';
                
                // 添加警报
                addAlert(`站点${stationId}风速超过阈值 (${windSpeed.toFixed(1)} m/s)`, 'danger');
            } else if (windSpeed >= threshold * 0.7) {
                // 警告状态
                statusIndicator.className = 'w-3 h-3 rounded-full bg-yellow-500 mr-2';
                statusText.textContent = '警告';
                statusText.className = 'text-yellow-400';
                stationStatus.textContent = '警告';
            } else {
                // 正常状态
                statusIndicator.className = 'w-3 h-3 rounded-full bg-green-500 mr-2';
                statusText.textContent = '正常';
                statusText.className = 'text-green-400';
                stationStatus.textContent = '正常';
            }
        }
        
        // 添加警报信息
        function addAlert(message, type = 'warning') {
            const alertsContainer = document.getElementById('alerts');
            if (!alertsContainer) return;
            
            const alertEl = document.createElement('div');
            alertEl.className = `bg-${type === 'danger' ? 'red' : 'yellow'}-500/20 p-3 rounded-lg border-l-4 border-${type === 'danger' ? 'red' : 'yellow'}-500 mb-3`;
            
            const now = new Date();
            alertEl.innerHTML = `
                <p class="font-medium">${message}</p>
                <p class="text-sm opacity-80">${now.toLocaleString()}</p>
            `;
            
            // 添加到容器顶部
            alertsContainer.prepend(alertEl);
            
            // 如果警报过多，移除最旧的
            if (alertsContainer.children.length > 5) {
                alertsContainer.removeChild(alertsContainer.lastChild);
            }
        }
                
        // 更新比较图表
        function updateCompareChart() {
            console.log('更新比较图表...');
            const compareContainer = document.getElementById('compare-chart-container');
            if (!compareContainer) {
                console.error('找不到比较图表容器!');
                return;
            }
            
            // 清空容器
            compareContainer.innerHTML = '';
            
            // 创建图表容器
            const chartDiv = document.createElement('div');
            chartDiv.style.width = '100%';
            chartDiv.style.height = '100%';
            compareContainer.appendChild(chartDiv);
            
            // 销毁旧图表并初始化新图表
            if (compareChart) {
                compareChart.dispose();
            }
            
            // 确保容器尺寸不为零
            if (chartDiv.offsetWidth === 0 || chartDiv.offsetHeight === 0) {
                console.warn('图表容器尺寸为零，等待重试...');
                setTimeout(updateCompareChart, 100);
                return;
            }
            
            console.log('初始化比较图表，容器尺寸:', chartDiv.offsetWidth, 'x', chartDiv.offsetHeight);
            compareChart = echarts.init(chartDiv);
            
            // 获取选中的站点
            const selectedStations = [];
            document.querySelectorAll('input[id^="compare-"]:checked').forEach(checkbox => {
                selectedStations.push(checkbox.value);
            });
            
            // 如果没有选择任何站点，默认选择当前站点
            if (selectedStations.length === 0) {
                selectedStations.push(stationId);
                // 自动选中当前站点的复选框
                const currentCheckbox = document.getElementById(`compare-${stationId}`);
                if (currentCheckbox) currentCheckbox.checked = true;
            }
            
            // 获取数据类型
            const activeButton = document.querySelector('.compare-type-btn.active');
            const dataType = activeButton ? activeButton.getAttribute('data-type') : 'wind';
            
            // 设置图表标题
            const chartTitle = document.getElementById('compare-chart-title');
            if (chartTitle) {
                chartTitle.textContent = dataType === 'wind' ? '风速对比图' : 
                                        (dataType === 'temp' ? '温度对比图' : '湿度对比图');
            }
            
            // 获取时间范围
            const timeRange = document.getElementById('compare-time-range').value;
            let hours = 24;
            if (timeRange === '1h') hours = 1;
            else if (timeRange === '7d') hours = 168;
            
            // 创建均匀分布的时间点
            const timePoints = [];
            const now = new Date();
            
            for (let i = hours; i >= 0; i--) {
                const timePoint = new Date(now.getTime() - i * 60 * 60 * 1000);
                timePoints.push(timePoint);
            }
            
            // 准备数据系列
            const series = [];
            const legendData = [];
            
            // 为每个选中的站点生成数据
            selectedStations.forEach(station => {
                const config = getStationConfig(station);
                
                // 定义数据系列的基础属性
                let seriesData = [];
                let seriesName = '';
                let lineColor = config.color || '#3B82F6';
                
                if (dataType === 'wind') {
                    // 风速数据 - 确保有足够的波动
                    seriesName = `${config.name} 风速`;
                    const baseWindSpeed = config.baseWind || 8;
                    
                    timePoints.forEach((time) => {
                        // 使用正弦波生成有规律的波动
                        const hourEffect = Math.sin(time.getHours() / 12 * Math.PI) * 2.5;
                        
                        // 添加随机波动
                        const randomEffect = (Math.random() - 0.5) * 4;
                        
                        // 添加站点特有的偏移
                        const stationOffset = (station.charCodeAt(0) - 65) * 1;
                        
                        // 综合计算风速值
                        const value = Math.max(1, baseWindSpeed + hourEffect + randomEffect + stationOffset);
                        
                        seriesData.push([time, value]);
                    });
                } else if (dataType === 'temp') {
                    // 温度数据
                    seriesName = `${config.name} 温度`;
                    const baseTemp = config.baseTemp || 15;
                    
                    timePoints.forEach((time) => {
                        // 温度在白天高，晚上低
                        const hourEffect = Math.sin((time.getHours() - 12) / 24 * Math.PI * 2) * 4;
                        
                        // 添加随机波动
                        const randomEffect = (Math.random() - 0.5) * 2;
                        
                        // 添加站点特有的偏移
                        const stationOffset = (station.charCodeAt(0) - 65) * 1.5;
                        
                        // 综合计算温度值
                        const value = baseTemp + hourEffect + randomEffect + stationOffset;
                        
                        seriesData.push([time, value]);
                    });
                } else {
                    // 湿度数据
                    seriesName = `${config.name} 湿度`;
                    const baseHumidity = config.baseHumidity || 60;
                    
                    timePoints.forEach((time) => {
                        // 湿度在晚上高，白天低
                        const hourEffect = -Math.sin((time.getHours() - 12) / 24 * Math.PI * 2) * 15;
                        
                        // 添加随机波动
                        const randomEffect = (Math.random() - 0.5) * 10;
                        
                        // 添加站点特有的偏移
                        const stationOffset = (station.charCodeAt(0) - 65) * 3;
                        
                        // 综合计算湿度值，确保在0-100范围内
                        const value = Math.min(100, Math.max(20, baseHumidity + hourEffect + randomEffect + stationOffset));
                        
                        seriesData.push([time, value]);
                    });
                }
                
                // 添加到图例数据
                legendData.push({
                    name: seriesName,
                    color: config.color
                });
                
                // 添加数据系列
                series.push({
                    name: seriesName,
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    symbol: 'circle',
                    symbolSize: 6,
                    emphasis: {
                        focus: 'series',
                        scale: 1.5,
                        lineStyle: {
                            width: 4
                        }
                    },
                    lineStyle: {
                        width: 3,
                        color: config.color
                    },
                    itemStyle: {
                        color: config.color
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: `${config.color}40` },
                            { offset: 1, color: `${config.color}00` }
                        ])
                    },
                    data: seriesData
                });
            });
            
            // 渲染自定义图例
            const legendContainer = document.getElementById('legend-container');
            if (legendContainer) {
                legendContainer.innerHTML = '';
                legendData.forEach(item => {
                    const legendItem = document.createElement('div');
                    legendItem.className = 'flex items-center space-x-1';
                    legendItem.innerHTML = `
                        <span style="background-color: ${item.color};" class="inline-block w-3 h-3 rounded-full"></span>
                        <span class="text-xs text-gray-300">${item.name}</span>
                    `;
                    legendContainer.appendChild(legendItem);
                });
            }
            
            // 计算Y轴范围
            let minValue = Infinity;
            let maxValue = -Infinity;
            
            series.forEach(serie => {
                serie.data.forEach(item => {
                    const value = item[1];
                    minValue = Math.min(minValue, value);
                    maxValue = Math.max(maxValue, value);
                });
            });
            
            // 设置Y轴的合理范围，确保数据波动可见
            const valueRange = maxValue - minValue;
            // 如果数据范围太小，扩大显示范围
            if (valueRange < 5) {
                const midPoint = (minValue + maxValue) / 2;
                minValue = midPoint - 3;
                maxValue = midPoint + 3;
            } else {
                // 添加一些空间，但确保比例合适
                minValue = Math.max(0, minValue - valueRange * 0.15);
                maxValue = maxValue + valueRange * 0.15;
            }
            
            // 设置图表选项
            const option = {
                backgroundColor: 'rgba(17, 24, 39, 1)', // 深色背景
                animation: true,
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(17, 24, 39, 0.8)',
                    borderColor: '#4B5563',
                    textStyle: {
                        color: '#F9FAFB'
                    },
                    formatter: function(params) {
                        const date = new Date(params[0].value[0]);
                        const formattedTime = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:00`;
                        
                        let html = `<div style="font-weight:bold">${formattedTime}</div>`;
                        params.forEach(param => {
                            html += `<div style="display:flex;align-items:center;margin-top:5px">
                                <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${param.color};margin-right:5px"></span>
                                <span>${param.seriesName}: ${param.value[1].toFixed(1)} ${dataType === 'wind' ? 'm/s' : (dataType === 'temp' ? '°C' : '%')}</span>
                            </div>`;
                        });
                        
                        return html;
                    }
                },
                grid: {
                    left: 70,
                    right: 40,
                    top: 30,
                    bottom: 80,
                    containLabel: false
                },
                xAxis: {
                    type: 'time',
                    min: timePoints[0].getTime(),
                    max: timePoints[timePoints.length - 1].getTime(),
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#6B7280',
                            width: 1.5
                        }
                    },
                    axisTick: {
                        show: true,
                        alignWithLabel: true,
                        lineStyle: {
                            color: '#6B7280'
                        }
                    },
                    axisLabel: {
                        color: '#D1D5DB',
                        fontSize: 11,
                        formatter: function(value) {
                            const date = new Date(value);
                            return `${date.getHours().toString().padStart(2, '0')}:00`;
                        },
                        interval: function(index, value) {
                            // 根据时间范围显示适当数量的标签
                            if (hours > 72) {
                                // 对于7天数据，只显示每天的0点
                                const date = new Date(value);
                                return date.getHours() === 0;
                            } else if (hours > 24) {
                                // 对于24小时以上数据，每6小时显示一个标签
                                const date = new Date(value);
                                return date.getHours() % 6 === 0;
                            } else {
                                // 对于24小时以内数据，每4小时显示一个标签
                                const date = new Date(value);
                                return date.getHours() % 4 === 0;
                            }
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: dataType === 'wind' ? '风速 (m/s)' : (dataType === 'temp' ? '温度 (°C)' : '湿度 (%)'),
                    nameTextStyle: {
                        color: '#D1D5DB',
                        fontSize: 12,
                        padding: [0, 30, 0, 0]
                    },
                    min: minValue,
                    max: maxValue,
                    splitNumber: 6,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#6B7280',
                            width: 1.5
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#6B7280'
                        }
                    },
                    axisLabel: {
                        color: '#D1D5DB',
                        fontSize: 11,
                        margin: 14,
                        formatter: function(value) {
                            if (dataType === 'wind') {
                                return `${value.toFixed(1)} m/s`;
                            } else if (dataType === 'temp') {
                                return `${value.toFixed(1)} °C`;
                            } else {
                                return `${value.toFixed(0)} %`;
                            }
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#374151',
                            type: 'dashed',
                            width: 1
                        }
                    }
                },
                dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: 0,
                    start: 0,
                    end: 100,
                    height: 30,
                    bottom: 10,
                    borderColor: 'transparent',
                    backgroundColor: 'rgba(47, 54, 69, 0.8)',
                    fillerColor: 'rgba(59, 130, 246, 0.2)',
                    handleStyle: {
                        color: '#3B82F6',
                        borderColor: '#3B82F6'
                    },
                    textStyle: {
                        color: '#D1D5DB'
                    }
                }],
                series: series
            };
            
            try {
                // 应用图表配置
                compareChart.setOption(option);
                console.log('比较图表更新完成');
                
                // 添加窗口大小变化监听器
                window.addEventListener('resize', function() {
                    if (compareChart) {
                        compareChart.resize();
                    }
                });
            } catch (error) {
                console.error('设置图表选项失败:', error);
            }
        }
        
        // 设置比较功能
        function setupCompareFeature() {
            console.log('设置站点对比功能...');
            const compareModal = document.getElementById('compare-modal');
            const openCompareBtn = document.getElementById('open-compare');
            const closeCompareBtn = document.getElementById('close-compare-modal');
            const updateCompareBtn = document.getElementById('update-compare');
            
            if (!compareModal) {
                console.error('找不到对比模态框!');
                return;
            }
            
            if (!openCompareBtn) {
                console.error('找不到打开对比按钮!');
                return;
            }
            
            // 初始化比较按钮状态
            document.querySelectorAll('.compare-type-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除所有活跃按钮
                    document.querySelectorAll('.compare-type-btn').forEach(b => {
                        b.classList.remove('active');
                        b.classList.add('bg-gray-700');
                        b.classList.remove('bg-blue-500');
                    });
                    
                    // 设置当前按钮为活跃
                    this.classList.add('active');
                    this.classList.remove('bg-gray-700');
                    this.classList.add('bg-blue-500');
                    
                    // 更新图表
                    updateCompareChart();
                });
            });
            
            // 监听时间范围变化
            document.getElementById('compare-time-range').addEventListener('change', updateCompareChart);
            
            // 打开比较模态框
            openCompareBtn.addEventListener('click', function() {
                console.log('打开站点对比模态框');
                
                // 确保当前站点被选中
                const currentCheckbox = document.getElementById(`compare-${stationId}`);
                if (currentCheckbox) {
                    currentCheckbox.checked = true;
                }
                
                // 显示模态框
                compareModal.classList.remove('hidden');
                
                // 初始化并渲染图表
                setTimeout(updateCompareChart, 100);
            });
            
            // 关闭比较模态框
            if (closeCompareBtn) {
                closeCompareBtn.addEventListener('click', function() {
                    compareModal.classList.add('hidden');
                });
            }
            
            // 更新比较按钮
            if (updateCompareBtn) {
                updateCompareBtn.addEventListener('click', updateCompareChart);
            }
            
            console.log('站点对比功能设置完成');
        }
        
        // 模拟实时数据更新
        function simulateRealTimeData() {
            // 定时更新数据
            setInterval(() => {
                // 获取站点配置
                const config = getStationConfig(stationId);
                
                // 基础值
                const baseWind = config.baseWind;
                const baseTemp = config.baseTemp;
                const baseHumidity = config.baseHumidity;
                
                // 添加随机变化
                const windVariation = (Math.random() - 0.5) * baseWind * 0.4;
                const tempVariation = (Math.random() - 0.5) * 2;
                const humidityVariation = (Math.random() - 0.5) * 5;
                
                // 新数据
                const newData = {
                    timestamp: new Date().toISOString(),
                    windSpeed: Math.max(0.1, baseWind + windVariation),
                    temperature: baseTemp + tempVariation,
                    humidity: Math.min(100, Math.max(10, baseHumidity + humidityVariation))
                };
                
                // 更新显示 - 只传递单个数据点
                updateDataDisplay([newData]);
                
                // 更新显示时间
                updateTime();
            }, 3000);
        }
        
        // 设置事件监听和按钮行为
        function setupEventListeners() {
            // 设置阈值滑块事件
            const thresholdSlider = document.getElementById('threshold-slider');
            if (thresholdSlider) {
                thresholdSlider.addEventListener('input', function() {
                    const value = parseFloat(this.value);
                    const thresholdValue = document.getElementById('threshold-value');
                    
                    if (thresholdValue) {
                        thresholdValue.textContent = value.toFixed(1) + ' m/s';
                        
                        // 根据值设置颜色
                        if (value < 10) {
                            thresholdValue.className = 'text-sm font-medium px-2 py-1 rounded-full bg-green-500/20 text-green-300';
                        } else if (value < 15) {
                            thresholdValue.className = 'text-sm font-medium px-2 py-1 rounded-full bg-yellow-500/20 text-yellow-300';
                        } else {
                            thresholdValue.className = 'text-sm font-medium px-2 py-1 rounded-full bg-red-500/20 text-red-300';
                        }
                        
                        // 更新全局阈值变量
                        stationData.alertThreshold = value;
                        
                        // 更新预测图表上的阈值线
                        if (forecastChart) {
                            forecastChart.setOption({
                                series: [
                                    {},
                                    {
                                        data: Array(12).fill(value)
                                    }
                                ]
                            });
                        }
                        
                        // 更新警报状态
                        const currentSpeed = parseFloat(document.getElementById('current-speed-value').textContent);
                        updateAlertStatus(currentSpeed);
                    }
                });
            }
            
            // 时间范围变更
            const timeRange = document.getElementById('time-range');
            if (timeRange) {
                timeRange.addEventListener('change', function() {
                    // 刷新历史数据
                    const hours = this.value === '1h' ? 1 : (this.value === '24h' ? 24 : 168);
                    const mockData = generateMockData(hours);
                    updateDataDisplay(mockData);
                });
            }
            
            // 设置导出按钮
            const exportBtn = document.getElementById('export-btn');
            if (exportBtn) {
                exportBtn.addEventListener('click', function() {
                    const format = document.getElementById('export-format').value;
                    const range = document.getElementById('export-range').value;
                    alert(`正在导出 ${range} 的数据为 ${format} 格式...`);
                });
            }
            
            // 刷新按钮
            const refreshBtn = document.getElementById('refresh-btn');
            if (refreshBtn) {
                refreshBtn.addEventListener('click', function() {
                    // 刷新数据
                    const hours = document.getElementById('time-range').value === '1h' ? 1 : 
                                (document.getElementById('time-range').value === '24h' ? 24 : 168);
                    const mockData = generateMockData(hours);
                    updateDataDisplay(mockData);
                    alert('数据已刷新');
                });
            }
        }
        
        // 初始化粒子效果
        function initParticles() {
            particlesJS('particles-js', {
                particles: {
                    number: { value: 80, density: { enable: true, value_area: 800 } },
                    color: { value: "#ffffff" },
                    shape: { type: "circle" },
                    opacity: { value: 0.5, random: true },
                    size: { value: 3, random: true },
                    line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 },
                    move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
                },
                interactivity: {
                    detect_on: "canvas",
                    events: {
                        onhover: { enable: true, mode: "repulse" },
                        onclick: { enable: true, mode: "push" }
                    }
                }
            });
        }
        
        // 页面初始化
        function initPage() {
            console.log('初始化站点详情页面...');
            
            // 获取并显示当前站点信息
            document.getElementById('station-name').textContent = getStationConfig(stationId).name;
            document.getElementById('station-location').textContent = getStationConfig(stationId).location;
            
            // 初始化粒子背景
            initParticles();
            
            // 初始化图表
            initCharts();
            
            // 设置事件监听器
            setupEventListeners();
            
            // 设置比较功能
            setupCompareFeature();
            
            // 模拟实时数据更新
            simulateRealTimeData();
            
            // 更新当前时间显示
            updateTime();
            setInterval(updateTime, 60000);
            
            // 加载初始数据
            const hours = document.getElementById('time-range').value === '1h' ? 1 : 
                      (document.getElementById('time-range').value === '24h' ? 24 : 168);
            const mockData = generateMockData(hours);
            updateDataDisplay(mockData);
            
            // 添加一些示例警报
            setTimeout(() => {
                addAlert('系统将于今晚22:00-23:00进行维护', 'warning');
                
                if (stationId === 'C') {
                    addAlert('站点C风速波动较大，请注意监测', 'warning');
                } else if (stationId === 'D') {
                    addAlert('站点D连接不稳定', 'danger');
                }
            }, 1000);
            
            console.log('站点详情页面初始化完成');
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', initPage);
    </script>
</body>
</html>
